<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <!--<div class="search-block">-->
            <!--<Input v-model="value" class="input-search" placeholder="根据标题查找" style="width: 200px"></Input>-->
            <!--<Input v-model="value" class="input-search" placeholder="根据标题查找" style="width: 200px"></Input>-->
            <!---->
            <!--<Button type="ghost" icon="ios-search">搜索</Button>-->
            <!--</div>-->
            <Button type="error" @click="jumpPage()" >添加</Button>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div style="margin: 10px;overflow: hidden;">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                images: [],
                updateId:'',
                tableColumns: [
                    {
                        title: '标题',
                        key: 'title',
                        align: 'center',
                        sortable: true

                    },
                    {
                        title: '封面',
                        align: 'center',
                        key: 'coverpath',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: params.row.coverpath
                                    },
                                    style: {
                                        width: '80px',
                                    },
                                    on: {
                                        click: () => {
                                            this.preview(params.index);
                                        }
                                    }
                                }),
                            ])
                        }
                    },
                    {
                        title: '作者',
                        key: 'writer',
                        align: 'center',
                    },
                    {
                        title: '来源',
                        key: 'source',
                        align: 'center',
                    },
                    {
                        title: '点赞数',
                        key: 'support',
                        align: 'center',
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        key: 'createDate',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small'
                                        },
                                        style: {
                                            color: '#5cadff'
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.id,'NewsEdit')
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            color: '#5cadff'
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.id,'NewsDetail')
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small'
                                        },
                                        style: {
                                            color: '#ff3300'
                                        },
                                        on: {
                                            click: () => {
                                                console.log("轮播id：",params.row.id);
                                                this.remove(params.row.id)
                                            }
                                        }
                                    }, '删除')
                                ]
                            )
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route='';
                if(id > 0 ){
                    route = {
                        path: url,
                        query: {
                            id:id
                        },
                    };
                }else {
                    route = {
                        path: 'NewsAdd',
                    };
                }

                this.$router.push(route);
            },
            //图片预览
            preview(index) {
                console.log('进入tip预览__index', index);
                this.$imagePreview({
                    images: this.images,
                    index: index,
                })
            },
            mockTableData() {
                let that = this;

                let para = {
                    current: this.current,
                    limit: 7,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.post(apiUtil.urls.newsList, params, function (res) {
                    that.$Loading.finish();
                    that.total = res.data.total;
                    that.current = res.data.current;
                    that.tableData = res.data.records;

                    that.tableData.forEach(function (item, i) {
                        that.images.push(item.coverpath);
                        console.log("图片:",that.images)
                    });
                });

            },
            remove(index) {
                let that = this;
                this.$Modal.confirm({
                    title: '删除新闻',
                    content: `是否删除此新闻`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {id: index};
                        let params = that.$qs.stringify(para);
                        apiUtil.post(apiUtil.urls.deleteNews, params, function (res) {

                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.images = [];
                this.mockTableData();
            }
        },
    }
</script>